<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container>
      <a-form :form="form" slot="detail">
        <a-collapse v-model="activeNames">
          <a-collapse-panel key="1" header="运输/仓储" >
            <a-tabs v-model="activeKey" type="editable-card" @edit="onEdit">
              <a-tab-pane v-for="(pane,idx) in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
                <a-row>
                  <a-col :span="13">
                    <a-form-item label="批次名称" :labelCol="labelCol1" :wrapperCol="wrapperCol">
                      <a-input v-if="isDisable" style="width: 200px" v-model="pane.title" :disabled="isDisable"
                               placeholder="批次"></a-input>
                      <a-input v-else style="width: 200px" v-model="inputcontent" :disabled="isDisable"
                               placeholder="批次"></a-input>
                      <a-button v-show="isDisable" style="margin-left: 10px" type="primary"
                                @click="changeName(pane.title)" icon="edit">
                        修改
                      </a-button>
                      <a-button v-show="!isDisable" style="margin-left: 10px" @click="changeNameCance(idx)">
                        取消
                      </a-button>
                      <a-button v-show="!isDisable" style="margin-left: 10px" type="primary"
                                @click="confirmName(idx)">
                        确定
                      </a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="10">
                    <a-form-item label="车队/仓库" :labelCol="labelCol2" :wrapperCol="wrapperCol">
                      <!--                      <a-select style="width: 200px;margin-left: 26px" placeholder="请选择" v-model="pane.fleet">-->
                      <!--                        <div slot="dropdownRender" slot-scope="menu">-->
                      <!--                          <v-nodes :vnodes="menu" />-->
                      <!--                          <a-divider style="margin: 4px 0;" />-->
                      <!--                          <div-->
                      <!--                            style="padding: 4px 8px; cursor: pointer;"-->
                      <!--                            @mousedown="e => e.preventDefault()"-->
                      <!--                            @click="addItem"-->
                      <!--                          >-->
                      <!--                            <a-icon type="plus" />-->
                      <!--                            Add item-->
                      <!--                          </div>-->
                      <!--                        </div>-->
                      <!--                        <a-select-option v-for="item in items" :key="item" :value="item">-->
                      <!--                          {{ item }}-->
                      <!--                        </a-select-option>-->
                      <!--                      </a-select>-->
                      <a-select style="width: 200px;margin-left: 26px" placeholder="请选择" v-model="pane.fleet">
                        <div slot="dropdownRender" slot-scope="menu">
                          <v-nodes :vnodes="menu" />
                          <a-divider style="margin: 4px 0;" />
                          <div
                            style="padding: 4px 8px; cursor: pointer;"
                            @mousedown="e => e.preventDefault()"
                            @click="addFleetItem(idx)"
                          >
                            <a-icon type="plus-circle" />
                            添加车队/仓库
                          </div>
                        </div>
                        <a-select-option v-for="(item, key) in fleetOptions" :key="key" :value="item.value">
                          {{ item.text }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>

                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="车牌号" :labelCol="labelCol2" :wrapperCol="wrapperCol">
                      <a-button type="link" @click="addCarNumbers(idx)">
                        <span style="text-decoration:underline">查看车牌号</span>
                      </a-button>
                      <!--                      <a-input hidden v-model="pane.carNumbers"></a-input>-->
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="进仓编号" :labelCol="labelCol2" :wrapperCol="wrapperCol">
                      <a-input style="width: 200px" placeholder="进仓编号" v-model="pane.entryNumber"></a-input>
                    </a-form-item>
                  </a-col>
                  <!--                  <a-col :span="11">-->
                  <!--                    <a-form-item label="关联箱号" :labelCol="labelCol2" :wrapperCol="wrapperCol">-->
                  <!--                      <a-button type="link">-->
                  <!--                        <span style="text-decoration:underline"> 查看箱号</span>-->
                  <!--                      </a-button>-->
                  <!--                    </a-form-item>-->
                  <!--                  </a-col>-->

                  <a-col :span="21">
                    <a-form-item label="箱型" :labelCol="labelCol3" :wrapperCol="wrapperCol">
                      <div v-for="(typeItem,i) in pane.typeList">
                        <j-dict-select-tag type="list" v-model="typeItem.type"
                                           dictCode="box_type	"
                                           placeholder="请选择箱型" style="width: 160px" />
                        <a-input-number style="margin-left: 10px" :min="1" :max="100000" v-model="typeItem.number" />

                        <j-dict-select-tag style="margin-left: 10px;width:150px" v-model="typeItem.source"
                                           default-value="COC"
                                           dictCode="box_source"
                                           showSearch="false"
                                           placeholder="请选择箱来源" />

                        <a-icon
                          v-if="pane.typeList.length >1"
                          style="margin-left: 10px"
                          class="dynamic-delete-button"
                          type="minus-circle-o"
                          @click="removeType(pane.typeList,i)"
                        />
                        <a-button v-if="pane.typeList.length - 1 == i" type="dashed"
                                  style="margin-left: 10px;width: 100px;color: darkgreen"
                                  @click="addboxtype(pane.typeList,i)">
                          <a-icon type="plus" />
                          增加
                        </a-button>
                      </div>
                    </a-form-item>

                  </a-col>

                  <a-col :span="8">
                    <a-form-item label="委托总毛重" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input-number style="width: 80px"
                                      placeholder="0" v-model="pane.totalGrossWeight"></a-input-number>
                      <j-dict-select-tag style="width: 120px;margin-left: 10px" type="list"
                                         v-model="pane.totalType"
                                         dictCode="total_type"
                                         placeholder="请选择" />

                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="毛重" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input type="number" v-model="pane.grossWeight" placeholder="0" suffix="KGS"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="体积" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input type="number" v-model="pane.volume" placeholder="0" suffix="CBM"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="21">
                    <a-form-item label="地址" :labelCol="labelCol3" :wrapperCol="wrapperCol">
                      <div v-for="(addressItem,k) in pane.addressList">

                        <j-dict-select-tag style="width: 120px" type="list" v-model="addressItem.type"
                                           dictCode="address_type	"
                                           placeholder="请选择" />

                        <a-input style="width: 200px" v-model="addressItem.content" />
                        <a-date-picker style="width: 140px" v-model="addressItem.time" />

                        <a-icon
                          v-if="pane.addressList.length >1"
                          style="margin-left: 10px"
                          class="dynamic-delete-button"
                          type="minus-circle-o"
                          @click="removeAddress(pane.addressList,k)"
                        />
                        <a-button v-if="pane.addressList.length - 1 == k" type="dashed"
                                  style="margin-left: 10px;width: 100px;color: darkgreen"
                                  @click="addAddress(pane.addressList,k)">
                          <a-icon type="plus" />
                          增加
                        </a-button>

                      </div>
                    </a-form-item>

                  </a-col>
                  <a-col :span="16">
                    <a-form-item label="运输委托备注" :labelCol="labelCol4" :wrapperCol="wrapperCol">
                      <a-textarea v-model="pane.transRemark" placeholder="可添加委托运输时需要告知供应商的信息" :rows="4"></a-textarea>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>

          </a-collapse-panel>
<!--          <a-collapse-panel-->
<!--            key="2"-->
<!--            header="箱信息" :style="customStyle"-->
<!--          >-->
<!--            <a-tabs default-active-key="1">-->
<!--              <a-tab-pane key="1" tab="箱列表">-->
<!--                <j-vxe-table-->
<!--                  ref="vTable"-->
<!--                  toolbar-->
<!--                  row-number-->
<!--                  row-selection-->
<!--                  drag-sort-->
<!--                  keep-source-->
<!--                  :height="350"-->
<!--                  :loading="loading"-->
<!--                  :dataSource="boxInfo.boxList"-->
<!--                  :columns="columns2"-->
<!--                  style="margin-top: 8px;"-->
<!--                  @valueChange="handleValueChange"-->
<!--                  bordered-->
<!--                >-->
<!--                  <template v-slot:boxnum="props">-->
<!--                    <div style="width: 100px">-->
<!--                      <j-search-select-tag v-model="props.row.boxnum" placeholder="请选择"-->
<!--                                           dict="jzx_info,container_number,id" />-->
<!--                    </div>-->
<!--                    &lt;!&ndash;                    <j-popup&ndash;&gt;-->
<!--                    &lt;!&ndash;                      v-decorator='props.row.boxnum'&ndash;&gt;-->
<!--                    &lt;!&ndash;                      :trigger-change="true"&ndash;&gt;-->
<!--                    &lt;!&ndash;                      param={name:111}&ndash;&gt;-->
<!--                    &lt;!&ndash;                      org-fields="id,container_code,container_number,container_type,name"&ndash;&gt;-->
<!--                    &lt;!&ndash;                      dest-fields="boxId,containerCode,containerNumber,containerType,name"&ndash;&gt;-->

<!--                    &lt;!&ndash;                      code="jzx_info"&ndash;&gt;-->
<!--                    &lt;!&ndash;                      field="containerNumber"&ndash;&gt;-->
<!--                    &lt;!&ndash;                      @callback="popupCallback"&ndash;&gt;-->
<!--                    &lt;!&ndash;                    />&ndash;&gt;-->
<!--                  </template>-->
<!--                  <template v-slot:action="props">-->
<!--                    <a @click="handleCK(props)">-->
<!--                      <a-badge-->
<!--                        :count="handlerGdhNumber(props.row.numberContent)"-->
<!--                        show-zero :offset="[8,5]">关联-->
<!--                      </a-badge>-->
<!--                    </a>-->

<!--                  </template>-->

<!--                </j-vxe-table>-->
<!--              </a-tab-pane>-->
<!--              <a-tab-pane key="2" tab="进仓信息">-->

<!--                <a-row>-->
<!--                  <a-col :span="8">-->
<!--                    <a-form-item label="进仓件数" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                      <a-input type="number" style="width: 80px" v-model="boxInfo.pieceNumber"-->
<!--                               placeholder="0"></a-input>-->
<!--                      <j-dict-select-tag style="width: 150px;margin-left: 5px" type="list"-->
<!--                                         v-model="boxInfo.pieceNumberUnit"-->
<!--                                         dictCode="total_type"-->
<!--                                         placeholder="请选择" />-->

<!--                    </a-form-item>-->
<!--                  </a-col>-->
<!--                  <a-col :span="8">-->
<!--                    <a-form-item label="进仓毛重" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                      <a-input type="number" v-model="boxInfo.totalWeight" placeholder="0" suffix="KGS"></a-input>-->
<!--                    </a-form-item>-->
<!--                  </a-col>-->
<!--                  <a-col :span="8">-->
<!--                    <a-form-item label="进仓体积" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                      <a-input type="number" v-model="boxInfo.totalVolume" placeholder="0" suffix="CBM"></a-input>-->
<!--                    </a-form-item>-->
<!--                  </a-col>-->
<!--                </a-row>-->
<!--              </a-tab-pane>-->

<!--            </a-tabs>-->

<!--          </a-collapse-panel>-->

        </a-collapse>
      </a-form>
      <div style="margin-top:100px"></div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 999,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="allclose">
          关闭
        </a-button>
        <a-button type="primary" @click="saveForm">
          保存
        </a-button>
      </div>
    </j-form-container>


    <a-modal width="60%" v-model="boxNumberVisible" title="箱号关联提单号" ok-text="保存" cancel-text="取消" @ok="okModal"
             @cancel="boxClose" :destroyOnClose="true" :maskClosable="false">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="关联关单号" forceRender>
          <j-vxe-table
            ref="mainTable"
            toolbar
            row-number
            row-selection
            keep-source
            :height="350"
            :dataSource="relMainNumList2"
            :columns="mainNumCol"
            style="margin-top: 8px;"
            bordered
          >

          </j-vxe-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="关联分单号" forceRender>

          <j-vxe-table
            ref="otherTable"
            toolbar
            row-number
            row-selection
            keep-source
            :height="350"
            :dataSource="relOtherNumList2"
            :columns="otherNumCol"
            style="margin-top: 8px;"
            bordered
          >
          </j-vxe-table>
        </a-tab-pane>

      </a-tabs>


    </a-modal>
    <!--    车牌号modal-->
    <a-modal :visible="carNumberModalVisible" title="录入车牌号" :destroyOnClose="true" :maskClosable="false" okText="保存"
             @cancel="carNumbersModalClose" @ok="saveCarNumbers">
      <a-tag color="orange" style="margin-bottom: 10px">
        请输入车牌号回车键确定
      </a-tag>
      <a-select mode="tags" style="width: 100%" v-model="carNumbers" placeholder="请输入车牌号回车键确定"
                @change="handleCarNumberChange">
      </a-select>
    </a-modal>
    <a-modal
      title="添加车队/仓库"
      :visible="fleetModalVisible"
      :maskClosable="false"
      :confirm-loading='confirmLoading'
      @ok="addHandleOkBgh"
      @cancel="addHandleCancelBgh"
    >
      <a-input placeholder="请输入报关行" v-model="fleetTitle" :allowClear=true></a-input>
    </a-modal>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import moment from 'moment'
import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import Vue from 'vue'
import { ajaxGetDictItems } from '@api/api'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'

let index = 0
export default {
  name: 'BoxTypeForm',
  components: {
    JSearchSelectTag,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    },
    JFormContainer
  },

  data() {

    const panes = [
      {
        title: '批次1',
        key: '1',
        closable: false,
        fleet: '',
        entryNumber: '',
        typeList: [{ 'number': 1, 'type': '', 'source': '' }],
        totalGrossWeight: '',
        totalType: '',
        grossWeight: '',
        volume: '',
        addressList: [{}],
        transRemark: '',
        carNumbers: []
      }
    ]
    return {
      boxNumberVisible: false,
      // boxInfo: {
      //   boxList: [],
      //   pieceNumber: '',
      //   pieceNumberUnit: '',
      //   totalWeight: '',
      //   totalVolume: ''
      // },
      relMainNumList: [],
      relMainNumList2: [],
      relOtherNumList: [],
      relOtherNumList2: [],
      imageUrl: '',
      loading: false,
      orgCode: Vue.ls.get('Login_Userinfo'),
      columns2: [
        {
          title: '箱号',
          key: 'boxnum',
          type: JVXETypes.select,
          width: '180px',
          dictCode: 'jzx_info,container_number,id,status=1 and sys_org_code=\'' + Vue.ls.get('Login_Userinfo').orgCode + '\''

        },
        {
          title: '封号',
          key: 'title',
          type: JVXETypes.input,
          width: '180px',
          defaultValue: '',
          placeholder: '请输入${title}'
        },
        {
          title: '关联提号单',
          key: 'gltdh',
          type: JVXETypes.slot,
          width: '180px',
          align: 'center',
          slotName: 'action'

        },
        ,
        {
          title: '是否关联箱号',
          key: 'glxh',
          type: JVXETypes.checkbox,
          width: '180px',
          align: 'center'

        },
        {
          title: '箱型',
          key: 'boxtype',
          type: JVXETypes.select,
          width: '180px',
          options: [],
          dictCode: 'box_source',
          placeholder: '请选择'
        },
        {
          title: '分件数',
          key: 'fjs',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '单位',
          key: 'company',
          type: JVXETypes.select,
          width: '180px',
          options: [],
          dictCode: 'total_type',
          placeholder: '请选择'
        },
        {
          title: '分毛重(KGS)',
          key: 'kgsweight',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '分体积(CBM)',
          key: 'cbmweight',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '箱皮重(KGS)',
          key: 'kgsweight',
          type: JVXETypes.inputNumber,
          width: '180px'
        },
        {
          title: 'VGM总重(KGS)',
          key: 'vgmweight',
          type: JVXETypes.inputNumber,
          width: '180px'
        },

        {
          title: 'VGM联系人',
          key: 'vgmchat',
          type: JVXETypes.input,
          width: '180px',
          defaultValue: '',
          placeholder: '请输入${title}'
        },

        {
          title: '称重方式',
          key: 'wegstyle',
          type: JVXETypes.input,
          width: '180px',
          defaultValue: '',
          placeholder: '请输入${title}'
        },

        {
          title: '称重时间',
          key: 'datetime',
          type: JVXETypes.datetime,
          width: '200px',
          placeholder: '请选择'
        },
        {
          title: '隐藏单号字符串',
          key: 'numberContent',
          type: JVXETypes.hidden,
          defaultValue: []
        }
      ],
      mainNumCol: [
        {
          title: '关单号',
          key: 'mainnum',
          type: JVXETypes.select,
          width: '180px',
          options: []
        },

        {
          title: '件数',
          key: 'js',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '单位',
          key: 'company',
          type: JVXETypes.select,
          width: '180px',
          options: [],
          dictCode: 'total_type',
          placeholder: '请选择'
        },
        {
          title: '毛重(KGS)',
          key: 'kgsweight',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '体积(CBM)',
          key: 'cbmweight',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        }
      ],
      otherNumCol: [
        {
          title: '分单号',
          key: 'mainnum',
          type: JVXETypes.select,
          width: '180px',
          options: []
        },

        {
          title: '件数',
          key: 'js',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '单位',
          key: 'company',
          type: JVXETypes.select,
          width: '180px',
          options: [],
          dictCode: 'total_type',
          placeholder: '请选择'
        },
        {
          title: '毛重(KGS)',
          key: 'kgsweight',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '体积(CBM)',
          key: 'cbmweight',
          type: JVXETypes.inputNumber,
          width: '180px',
          statistics: ['sum']
        }

      ],
      dataSource2: [],
      items: ['jack', 'lucy'],
      inputcontent: '',
      selectNames: ['1', '2', '3', '4', '5'],
      typeList: [{}],
      addressList: [{}],
      isDisable: true,
      activeKey: panes[0].key,
      panes,
      customStyle:
        '',
      newTabIndex: 1,
      activeNames: [1],
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      labelCol3: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      labelCol4: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      labelCol5: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol5: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      wrapperCol3: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 19 }
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/box.ship/shipInfo/xianghuo/add',
        queryById: '/box.ship/shipInfo/xianghuo/queryByShipId'
      },
      // rowid: '',
      boxListCurrentData: [],
      /*查看车牌号*/
      carNumberModalVisible: false,
      carNumbers: [],
      carNumbersTemp: [],
      paneIndex: 0,//当前panneIndex
      //报关行
      fleetOptions: [],
      fleetModalVisible: false,
      fleetTitle: '',
      modelId: '',
      isrefresh: 0
      // mainOffNumbersData: [],
      // otherOffNumbersData: []
    }
  },
  computed: {},

  created() {
    this.isDisable = true
    this.initDict()
  },
  watch: {
    panes: {
      handler() {
        this.isrefresh += 1
        if (this.isrefresh > 1) {
          this.$emit('isEditFunctino', true)
        }
      },
      deep: true
    }
  },
  methods: {
    handlerGdhNumber(data) {
      if (data.length == 0) {
        return 0
      } else if (data.relMainNumList.length > 0) {
        let hash = []
        console.log(data.relMainNumList)
        for (let i = 0; i < data.relMainNumList.length; i++) {
          if (hash.indexOf(data.relMainNumList[i].mainnum) == -1) {
            hash.push(data.relMainNumList[i].mainnum)
          }
        }
        return hash.length
      } else {
        return 0
      }
    },
    initDict() {
      let a = Vue.ls.get('Login_Userinfo')
      this.orgCode = a.orgCode
      ajaxGetDictItems('foreign_agent_info,title,id,sys_org_code=\'' + a.orgCode + '\'', null).then((res) => {
        if (res.success) {
          this.fleetOptions = res.result
        }
      })
    },
    addFleetItem(index) {
      this.fleetModalVisible = true
      this.paneIndex = index
    },
    addHandleOkBgh() {
      let customerVal = this.fleetTitle.trim().replaceAll(' ', '')
      let url = '/box.common/add/foreignAgent', method = 'post'
      let value = { 'customerTitle': customerVal }
      if (customerVal) {
        httpAction(url, value, method).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.fleetModalVisible = false
            this.panes[this.paneIndex].fleet = customerVal
            this.fleetOptions.unshift({ 'value': res.result, 'text': customerVal, 'title': customerVal })
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.fleetTitle = ''
        })
      }
    },
    addHandleCancelBgh() {
      this.fleetModalVisible = false
      this.fleetTitle = ''
    },
    //获取海运单号ID
    questId(id) {
      console.log('id:' + id)
      this.modelId = id
      this.selectAllNumber(id)

    },
    selectAllNumber(id) {
      var that = this
      let params = { 'shipId': id }
      getAction(this.url.queryById, params).then((res) => {
        that.confirmLoading = true
        if (res.success) {
          console.log(res)
          let mod = JSON.parse(res.result.mainOffNumbersData)
          let ood = JSON.parse(res.result.otherOffNumbersData)

          let modAction = mod.map((item) => {
            return item = JSON.parse('{"text":"' + item + '","value":"' + item + '"}')
          })
          let oodAction = ood.map((item) => {
            return item = JSON.parse('{"text":"' + item + '","value":"' + item + '"}')
          })
          that.mainNumCol[0].options = modAction
          that.otherNumCol[0].options = oodAction
          if (res.result.containerCargoInfos.length == 0) {
            return
          }
          // that.boxInfo = JSON.parse(res.result.containerCargoInfos[0].boxInfo)

          that.panes = res.result.containerCargoInfos
          console.log(that.panes)
          that.panes.map(function(panes, K) {
            panes.key = K + 1 + ''
            that.newTabIndex = K + 1
            panes.carNumbers = JSON.parse(panes.carNumbers)
            panes.typeList = JSON.parse(panes.typeList)
            panes.addressList = JSON.parse(panes.addressList)
          })
          console.log(that.panes)
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    /**
     * 查看车牌号
     * **/
    addCarNumbers(index) {
      console.log(index)
      this.paneIndex = index
      this.carNumberModalVisible = true
      this.carNumbersTemp = this.panes[index].carNumbers
      this.carNumbers = this.panes[index].carNumbers
    },
    handleCarNumberChange(value) {
      this.carNumbers = value
    },
    //取消
    carNumbersModalClose() {
      this.carNumbers = this.carNumbersTemp
      this.carNumberModalVisible = false
    },
    //保存
    saveCarNumbers() {
      this.carNumberModalVisible = false
      this.panes[this.paneIndex].carNumbers = this.carNumbers
    },
    okModal() {
      console.log(this.$refs.otherTable.getTableData())
      console.log(this.$refs.mainTable.getTableData())
      let value = {
        relMainNumList: this.$refs.mainTable.getTableData(),
        relOtherNumList: this.$refs.otherTable.getTableData()
      }
      this.relMainNumList2 = []
      this.relOtherNumList2 = []
      this.boxNumberVisible = false
      this.boxListCurrentData.row['numberContent'] = value
      console.log(this.boxListCurrentData.row)
      this.$refs.vTable.setValues(this.boxListCurrentData)

    },
    saveForm() {
      const that = this
      // this.boxInfo.boxList = this.$refs.vTable.getTableData()
      // console.log(this.$refs.vTable.getDeleteData())
      // let deleteData = this.$refs.vTable.getDeleteData()
      // let deleteBoxNumIds = ''
      // deleteData.forEach(c => {
      //   deleteBoxNumIds = deleteBoxNumIds + c.boxnum + ','
      // })
      let formData = {
        // boxInfo: this.boxInfo,
        containerCargoInfos: this.panes,
        shipId: that.modelId,
        // deleteBoxNumIds: deleteBoxNumIds
      }
      console.log(formData)
      // 触发表单验证
      this.form.validateFields((err, values) => {
        console.log('表单提交数据', values)
        if (!err) {
          that.confirmLoading = true
          httpAction(this.url.add, formData, 'post').then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('allOk')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    boxClose() {
      this.relMainNumList2 = []
      this.relOtherNumList2 = []
    },
    allclose() {
      this.$emit('allclose')
    },
    //关联单号
    handleCK(props) {
      console.log(props)
      this.boxNumberVisible = true
      this.relMainNumList2 = props.row.numberContent.relMainNumList ? props.row.numberContent.relMainNumList : []
      this.relOtherNumList2 = props.row.numberContent.relOtherNumList ? props.row.numberContent.relOtherNumList : []
      // this.rowid = props.row.id
      // 获取当前行的数据
      this.boxListCurrentData = props

    },

    handleDL(props) {
      // 调用删除方法
      props.target.removeRows(props.row)
    },

    handleValueChange(event) {
      console.log('handleValueChange.event: ', event)
    },

    /** 表单验证 */
    handleTableCheck() {
      this.$refs.vTable.validateTable().then(errMap => {
        if (errMap) {
          console.log('表单验证未通过：', { errMap })
          this.$message.error('验证未通过，请在控制台查看详细')
        } else {
          this.$message.success('验证通过')
        }
      })
    },

    /** 获取值，忽略表单验证 */
    handleTableGet() {
      const values = this.$refs.vTable.getTableData()
      console.log('获取值:', { values })
      this.$message.success('获取值成功，请看控制台输出')
    },

    addItem() {
      console.log('addItem')
      this.items.push(`New item ${index++}`)
    },
    confirmName(index) {
      if (!this.inputcontent) {
        this.$message.error('内容不可为空!')

        return
      }
      this.panes[index].title = this.inputcontent
      this.isDisable = true

      // pane.key+'a'"
      // console.log(this.$refs)
    },
    changeName(value) {
      this.isDisable = false
      this.inputcontent = value

    },
    changeNameCance(index) {
      this.isDisable = true
      // this.panes[index].content =  this.panes[index].title
    },
    callback(key) {
      console.log(key)
    },
    onEdit(targetKey, action) {
      this.isDisable = true
      this[action](targetKey)
    },
    add() {
      console.log(this.newTabIndex)
      const panes = this.panes
      const activeKey = `批次${this.newTabIndex++}`
      panes.push({
        title: '批次' + this.newTabIndex, key: activeKey, fleet: '',
        entryNumber: '',
        typeList: [{}],
        totalGrossWeight: '',
        totalType: '',
        grossWeight: '',
        volume: '',
        addressList: [{}],
        transRemark: '',
        carNumbers: []
      })
      this.panes = panes
      this.activeKey = activeKey
      this.panes.forEach((pane, i) => {
        pane.closable = true
      })
    },
    popupCallback(value, others, id, row, column, index) {
      console.log(value)
      console.log(others)
      console.log(id)
      console.log(row)
      console.log(column)
      // console.log(props)
    },
    remove(targetKey) {
      this.isDisable = true
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      if (panes.length == 1) {
        panes[0].closable = false
      }
      this.panes = panes
      this.activeKey = activeKey
    },
    removeType(item, index) {
      item.splice(index, 1)
    },
    removeAddress(item, index) {
      item.splice(index, 1)
    },
    addboxtype(item, i) {

      if (!item[i].type || item[i].type == '') {
        this.$message.warning('请填写完整后增加下一条!')

        return
      }
      if (!item[i].number || item[i].number == '') {

        this.$message.warning('请填写完整后增加下一条！')

        return
      }
      if (!item[i].source || item[i].source == '') {

        this.$message.warning('请填写完整后增加下一条！')

        return
      }
      // let values ={};
      item.push({ 'number': 1, 'type': '', 'source': '' })

    },

    addAddress(item, k) {
      if (!item[k].type || item[k].type == '') {
        this.$message.warning('请填写完整后增加下一条!')

        return
      }
      if (!item[k].content || item[k].content == '') {

        this.$message.warning('请填写完整后增加下一条！')

        return
      }
      if (!item[k].time || item[k].time == '') {

        this.$message.warning('请填写完整后增加下一条！')

        return
      }
      // let values ={};
      item.push({})
    }

  }
}
</script>
<style>
.avatar-uploader > .ant-upload {
  width: 90px;
  height: 90px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}


</style>